import { getGoodsData } from "../modules/getData.js";
import getLocalData from "../modules/getLocalData.js";
import { cartRender } from "../modules/render.js";
import addEvent from "../modules/addEvent.js";
import allCheck from "../modules/allCheck.js";
import computed from "../modules/computed.js";

// 1. 获取模型中的数据
let goodsData = await getGoodsData();
goodsData = JSON.parse(goodsData);
// 2. 获取本地存储中的数据
let cartData = getLocalData();

// 3. 将数据渲染到视图
const tbody = document.querySelector("tbody");
cartRender(goodsData, cartData, tbody);

// 4. 使用事件委托绑定事件，完成 选中单个，修改数量，删除单个 功能
// 4.1 修改并记录选中状态
addEvent(cartData, "change", "check", (i, element)=>{
  cartData[i].check = element.checked;
  // 5.1 计算是否需要全选
  $(".allCheck").checked = cartData.every(val=>val.check);
  // 7.1 计算总价和总数量
  computed($(".allNum"), $(".allPrice"), cartData);
})

// 4.2 修改并记录数量
addEvent(cartData, "input", "setNum", (i, element)=>{
  cartData[i].num = element.value-0;
  // 7.2 计算总价和总数量
  computed($(".allNum"), $(".allPrice"), cartData);

  // 作业1：获取当前商品的小计元素
  const count = element.parentNode.parentNode.querySelector(".count");
  // 作业2：通过数据中的数量和单价计算小计，设置回该容器
  count.innerHTML = cartData[i].num * cartData[i].price;
})

// 4.3 修改并记录删除
addEvent(cartData, "click", "del", (i, element)=>{
  element.parentNode.parentNode.remove();
  cartData.splice(i, 1);
  // 5.2 计算是否需要全选
  $(".allCheck").checked = cartData.every(val=>val.check);
  // 7.3 计算总价和总数量
  computed($(".allNum"), $(".allPrice"), cartData);
})

// 5. 打开页面立即，计算是否需要全选
$(".allCheck").checked = cartData.every(val=>val.check);

// 6. 修改全选时，影响所有单个复选框
// 注意：注意传参方式，和事件处理函数的执行
$(".allCheck").onchange = function(){
  // a1. 执行所有单个复选框的同步，注意模块的封装形式为闭包，注意this指向
  allCheck(tbody, cartData).call(this);
  // a2. 计算总价和总数量
  computed($(".allNum"), $(".allPrice"), cartData);
};

// 7. 计算总价和总数量
computed($(".allNum"), $(".allPrice"), cartData);

// 8. 删除选中的点击事件
$(".delCheck").onclick = function(){
  // 过滤出没有被选中的数据，覆盖原数据
  // cartData = cartData.filter(val=>!val.check)
  
  // f1. 先从老数组中找到要保留的数据，放在新数组中
  const arr = cartData.filter(val=>!val.check)
  // f2. 清空老数组
  cartData.length = 0;
  // f3. 将新数组中的数据，逐个添加到老数组中，保证老数组还是老数组，地址不更新
  cartData.push(...arr);

  // 覆盖本地存储中的数据
  localStorage.setItem("goods", JSON.stringify(cartData));

  // 从DOM中找到被选中的复选框，删除所在行
  const checks = tbody.querySelectorAll(".check")
  checks.forEach(val=>{
    if(val.checked){
      val.parentNode.parentNode.remove();
    }
  });

  // 计算总价和总数量
  computed($(".allNum"), $(".allPrice"), cartData);
}



function $(sel){
  return document.querySelector(sel)
}